
.user-info-header{
    background-image: url(../images/icon/center_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 25vw;
}
.user-info-header .user-ava{
    width: 100%;
    height: 25vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.user-info-header .user-ava .van-image{
    margin:auto;
}
.user-info-header .user-ava .crown{
    width: 6vw;
    height: 6vw;
    position: absolute;
    z-index: 999;
    top: 0.5vw;
    left:4.5vw;
}
.user-info-header .user-content{
    width: 100%;
    height: 25vw;
    padding-top: 2.5vw;
}
.user-info-header .user-content .user-name{
    color: #FFFFFF;
}
.user-info-header .user-content .user-phone{
    color: #FFFFFF;
}
.user-info-header .user-content .user-level{
    display:flex;
    align-items:center;
    height: 2rem;
}
.user-info-header .user-content .user-level .vip{
    width: 1.3rem;
}
.user-info-header .user-content .user-level .vip img{
    width: 1.2rem;
    height:1.2rem;
}

.user-info-header .user-content .user-level .level-progress{
    width: calc(100% - 1.3rem);
    height: 1rem;
    display: flex;
    align-items: center;
    font-size: 0.6rem;
    color: #968f88;
}
.user-info-header .user-content .user-level .level-progress .left-vip{
    width: 2rem;
    text-align: center;
    background-color: #f5f5f5;
    padding: 0 5px;
    border-radius: 10px;
}
.user-info-header .user-content .user-level .level-progress .left-vip.active,.user-info-header .user-content .user-level .level-progress .right-vip.active{
    color: #fa8511;
    background-color: #ffe502;
}
.user-info-header .user-content .user-level .level-progress .progress{
    width: calc(100% - 4rem);
    height: 0.3rem;
    background-color: #968f88;

}
.user-info-header .user-content .user-level .level-progress .progress .active{
    width: 0;
    height:0.3rem;
    background-color: #ffe502;

}
.user-info-header .user-content .user-level .level-progress .right-vip{
    width: 2rem;
    text-align: center;
    background-color: #f5f5f5;
    padding: 0 5px;
    border-radius: 10px;
}
.user-info-header .msg-area{
    width: 100%;
    height: 25vw;
    padding-top: 2.5vw;
    text-align: right;
}
.user-info-header .msg-area .msg-item{
    margin-right: 15px;
    position: relative;
}
.user-info-header .msg-area .msg-item .msg-title{
    background-color: #ffffff;
    color:#0eab4b;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
}
.user-info-header .msg-area .msg-item .msg-tab{
    padding: 0 5px;
    border-radius: 0.6rem;
    font-size: 0.6rem;
    color:#FFFFFF;
    background-color: #fa8511;
    position: absolute;
    z-index: 999;
    right: -0.3rem;
    top: -0.3rem;
}

.order-status-area{
    margin:15px 0;
    border-top:1px solid #DDDDDD;
    border-bottom:1px solid #DDDDDD;
	box-shadow:1px 1px 2px #DDDDDD;
}
.order-status-area .order-all{
    border-bottom:1px solid #DDDDDD;
}